<template>
  <div
    class="selftHeader_modoule flex justify_between align_items_center wfull"
  >
    <div class="header_left">
      <span class="iconfont icon-yunduan"></span>
      <span>{{ $t("selfHeader_headerTitle") }}</span>
    </div>
    <div class="header_right flex">
      <!-- 企业 -->
      <div class="header_item">
        <div class="iconBox">
          <span class="iconfont icon-qiye font_size_16"></span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_enterprise") }}</span>
      </div>
      <!-- 消息 -->
      <div class="header_item">
        <div class="iconBox note_module">
          <span class="iconfont icon-xiaoxi font_size_16"></span>
          <span class="note">3</span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_mgs") }}</span>
      </div>
      <!-- 个人 -->
      <div class="header_item">
        <div class="iconBox">
          <span class="iconfont icon-geren font_size_16"></span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_person") }}</span>
      </div>
      <!-- 帮助 -->
      <div class="header_item">
        <div class="iconBox">
          <span class="iconfont icon-bangzhu font_size_16"></span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_help") }}</span>
      </div>
      <!-- 背景 -->
      <div class="header_item">
        <div class="iconBox">
          <span class="iconfont icon-yifu font_size_16"></span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_bg") }}</span>
      </div>
      <!-- 退出 -->
      <div class="header_item" @click="handleExit">
        <div class="iconBox">
          <span class="iconfont icon-tuichu font_size_16"></span>
        </div>
        <span class="font_size_16">{{ $t("selfHeader_exit") }}</span>
      </div>
    </div>
    <DialogComponentVue
      :modelValue="dialogVisible"
      @update:modelValue="handleDialogVisibleUpdate"
      :key="dialogVisibleKey"
      :activeEvent="activeEvent"
      style="width:300px;"
    >
      <p>{{$t("selfHeader_exit_tips")}}</p>
    </DialogComponentVue>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DialogComponentVue from "../DialogComponent/DialogComponent.vue";
import {exit} from "../../service/selfHeader/selfHeader"

import {useRouter} from "vue-router"
import {useRouterTabStore} from "../../store/routerTab/routerTab"

export default defineComponent({
  name: "selfHeader",
  components: {
    DialogComponentVue,
  },
  setup() {
    const routerTabStore = useRouterTabStore()
    const router = useRouter()
    const dialogVisible = ref<boolean>(false);
    const dialogVisibleKey = ref(new Date().getTime());
    const dialogTitle = ref<string>("")
    // 退出事件
    const handleExit = () => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = true;
      dialogTitle.value = "退出"
    };
    // 退出事件确认事件的定义
    const activeEvent = () => {
      return new Promise((resolve,reject) => {
        exit().then(() => {
          routerTabStore.clearRoute()
            localStorage.removeItem("isLoggedIn")
            router.push({
                path: "/login"
            })
            resolve(true)
        }).catch(() => {
          reject(false)
        })
      })
        
        
    }
    // 更新弹框的状态
    const handleDialogVisibleUpdate = (newValue: boolean) => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = newValue;
    };
    return {
      handleExit,
      dialogVisible,
      dialogVisibleKey,
      handleDialogVisibleUpdate,
      activeEvent,
      dialogTitle
    };
  },
});
</script>

<style scoped>
.selftHeader_modoule {
  background-color: rgba(243, 243, 244, 1);
  border-color: rgba(215, 215, 215, 1);
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

.header_item {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 100%;
  margin-left: 10px;
  cursor: pointer;
}
.note_module {
  position: relative;
}
.note {
  position: absolute;
  top: -7px;
  left: 7px;
  font-size: 16px;
  color: red;
  font-weight: bold;
}
.iconBox {
  margin-right: 2px;
}
</style>
